# Component: Subtitle List

Interactive transcript and timestamp navigation list

Media Utility Block

### BEM Anatomy

| Type      | Class Name          | Description                                                                                                                         |
| --------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-subtitle-list` | The master list container. Extends Bootstrap's `list-group`.                                                                        |
| Element   | `__item`            | The interactive row. Uses `display: flex` to align timestamps and text.                                                             |
| Modifier  | `__item--active`    | Applies primary theme highlights to the row currently corresponding to the video playback time.                                     |
| Element   | `__start`           | The timestamp indicator. Styled with bold text and a fixed right margin.                                                            |
| Element   | `__text`            | The transcript text content. Implements `flex-grow: 1` to occupy available space.                                                   |
| Element   | `__link`            | The underlying interactive anchor that allows a user to click a subtitle line and jump the video player to that specific timestamp. |

### Interactive Navigation

This component utilizes two distinct navigation methods: internal offsets (clicking the time or text triggers an event to scrub the video) and external links (the icon link opens the video source at that specific timestamp in a new tab).

##### Generated HTML (Active Row)

```html
<div class="as-subtitle-list list-group">
    <a href="javascript:void(0);" class="as-subtitle-list__item as-subtitle-list__item--active list-group-item">
        <div class="as-subtitle-list__start">
            <strong>05:12</strong>
        </div>
        <div class="as-subtitle-list__text">
            The transcript text for this timestamp...
        </div>
        <a href="..." target="_blank" class="as-subtitle-list__link">
            <i class="fa-solid fa-arrow-up-right-from-square"></i>
        </a>
    </a>
</div>
```

##### SCSS

```scss
.as-subtitle-list {
  &__item {
    display: flex;
    padding: 0.25rem 0.5rem;

    &--active {
      // Modern primary coloring using 
      // Bootstrap 5.3 CSS variables
      --bs-list-group-bg: var(--bs-primary-bg-subtle);
      --bs-list-group-border-color: var(--bs-primary-border-subtle);
    }
  }

  &__text {
    flex-grow: 1; // Pushes external link to the right
  }
}
```
